<template>
    <div class="wrapper">
        <div class="publish">
            <a-card title="我要发布" style="width: 80%">
                <a-form
                    :model="formState"
                    name="basic"
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    autocomplete="off"
                    @finish="onFinish"
                    @finishFailed="onFinishFailed"
                    style="width: 60%;"
                >
                    <a-form-item
                        label="材料名称"
                        name="matrialName"
                        :rules="[{ required: true, message: '请输入材料名称!' }]"
                    >
                        <a-input v-model:value="formState.materialrname" />
                    </a-form-item>

                    <a-form-item
                        label="数量"
                        name="quantity"
                        :rules="[{ required: true, message: '请输入材料数量!' }]"
                    >
                        <a-input v-model:value="formState.quantity" />
                    </a-form-item>

                    <a-form-item label="价格用途"
                        :rules="[{ required: true, message: '请输入价格用途!' }]"
                    >
                        <a-checkbox-group v-model:value="formState.use">
                            <a-checkbox value="1" name="type">采购</a-checkbox>
                            <a-checkbox value="2" name="type">预算</a-checkbox>
                            <a-checkbox value="3" name="type">结算</a-checkbox>
                            <a-checkbox value="4" name="type">招投标</a-checkbox>
                        </a-checkbox-group>
                    </a-form-item>

                    <a-form-item
                        label="供货周期"
                        name="span"
                        :rules="[{ required: true, message: '请输入供货周期!' }]"
                    >
                        <a-input v-model:value="formState.span" />
                    </a-form-item>

                    <a-form-item
                        label="付款方式"
                        name="payment"
                        :rules="[{ required: true, message: '请输入付款方式!' }]"
                    >
                        <a-input v-model:value="formState.payment" />
                    </a-form-item>

                    <a-form-item
                        label="项目所在地"
                        name="projectPosition"
                        style="margin-bottom: 5px;"
                    >
                        <a-input v-model:value="formState.projectPosition" />
                    </a-form-item>

                    <a-form-item
                        label="项目名称（选填）"
                        name="projectName"
                    >
                        <a-input v-model:value="formState.projectName" />
                    </a-form-item>

                    <a-form-item
                        label="询价单位（选填）"
                        name="from"
                    >
                        <a-input v-model:value="formState.from" />
                    </a-form-item>

                    <a-form-item
                        label="询价联系人"
                        name="contact"
                        :rules="[{ required: true, message: '请输入联系人!' }]"
                    >
                        <a-input v-model:value="formState.contact" />
                    </a-form-item>

                    <a-form-item
                        label="付款方式"
                        name="payment"
                        :rules="[{ required: true, message: '请输入付款方式!' }]"
                    >
                        <a-input v-model:value="formState.payment" />
                    </a-form-item>

                    <a-form-item label="报价是否加盖公章"
                        :rules="[{ required: true, message: '请选择!' }]"
                    >
                        <a-radio-group v-model:value="formState.stampOrNot">
                            <a-radio value="1">是</a-radio>
                            <a-radio value="2">否</a-radio>
                        </a-radio-group>
                    </a-form-item>

                    <a-form-item label="报价是否公开"
                        :rules="[{ required: true, message: '请选择!' }]"
                    >
                        <a-radio-group v-model:value="formState.publicOrNot">
                            <a-radio value="1">是</a-radio>
                            <a-radio value="2">否</a-radio>
                        </a-radio-group>
                    </a-form-item>

                    <a-form-item label="报价截止日期">
                        <a-date-picker v-model:value="formState.deadline"/>
                    </a-form-item>

                    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                        <a-button type="primary" html-type="submit">Submit</a-button>
                    </a-form-item>
                </a-form>
            </a-card>
        </div>
        <div class="quote">
            <a-card title="竭诚报价" style="width: 80%">
                <a-form
                    :model="formState1"
                    name="basic"
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                    autocomplete="off"
                    @finish="onFinish"
                    @finishFailed="onFinishFailed"
                    style="width: 60%;"
                >
                    <a-form-item
                        label="厂商名称"
                        name="manufacturer"
                        :rules="[{ required: true, message: '请输入厂商名称!' }]"
                    >
                        <a-input v-model:value="formState1.manufacturer" />
                    </a-form-item>

                    <a-form-item
                        label="联系人"
                        name="contact"
                        :rules="[{ required: true, message: '请输入联系人!' }]"
                    >
                        <a-input v-model:value="formState1.contact" />
                    </a-form-item>

                    <a-form-item label="价格类型"
                        :rules="[{ required: true, message: '请输入价格类型!' }]"
                    >
                        <a-radio-group v-model:value="formState1.priceType">
                            <a-radio value="1">除税价</a-radio>
                            <a-radio value="2">含税价</a-radio>
                            <a-radio value="3">货到工地价</a-radio>
                        </a-radio-group>
                    </a-form-item>

                    <a-form-item
                        label="税率"
                        name="span"
                    >
                        <a-input v-model:value="formState1.taxRate" />
                    </a-form-item>

                    <a-form-item
                        label="总价"
                        name="total"
                        :rules="[{ required: true, message: '请输入总价!' }]"
                    >
                        <a-input v-model:value="formState1.total" />
                    </a-form-item>

                    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                        <a-button type="primary" html-type="submit">Submit</a-button>
                    </a-form-item>
                </a-form>
            </a-card>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
const formState = reactive({

})

const formState1 = reactive({

})

const onFinish = values => {
  console.log('Success:', values);
}
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
}
</script>

<style scoped>
.wrapper{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.publish{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.quote{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}
</style>